<!-- 任务管理 -->
<template>
  <div class="context_box_f tabbarBottom">
    <div class="task_tabs">
      <van-tabs v-model="active" color="#3AD2CE" @change="taskListFn">
        <van-tab title="待领取"></van-tab>
        <van-tab title="进行中"></van-tab>
        <van-tab title="已完成"></van-tab>
      </van-tabs>
    </div>

    <div class="taskM" v-if="taskList[0]">
      <div class="taskM_in" v-for="(item, i) in taskList" :key="i">
        <taskBox
          v-if="active == 0"
          :item="item"
          :url="
            active == 1
              ? '/task-ongoing'
              : active == 2
              ? '/task-end'
              : '/task-accept'
          "
        ></taskBox>
        <taskBoxOther
          v-else
          :item="item"
          :url="
            active == 1
              ? '/task-ongoing'
              : active == 2
              ? '/task-end'
              : '/task-accept'
          "
        ></taskBoxOther>
      </div>
      <!-- <div class="taskM_page">
      <van-pagination v-model="currentPage" :total-items="125" :show-page-size="3" force-ellipses />
      </div>-->
    </div>
    <van-empty v-else image="search" description="当前暂无任务" />
  </div>
</template>

<script>
import api from "@/api/task";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    taskBox: (resolve) =>
      require(["@/views/task-management/task-box.vue"], resolve),
    taskBoxOther: (resolve) =>
      require(["@/views/task-management/task-box-other.vue"], resolve),
  },
  data() {
    //这里存放数据
    return {
      active: 0,
      currentPage: 0,
      taskList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 待领取任务
    taskListFn() {
      this.taskList = [];
      this["taskListType" + this.active]();
    },
    taskListType0() {
      api.apiTaskList().then((res) => {
        if (res.code == 0) {
          this.taskList = res.userId;
        }
      });
    },
    // 进行中
    taskListType1() {
      api
        .apiTaskState({
          appState: 1,
        })
        .then((res) => {
          if (res.code == 0) {
            let newArr = [];
            res.data.forEach((item) => {
              let _obj = item.missionInfo;
              delete item["missionInfo"];
              _obj = { ..._obj, ...item };
              newArr.push(_obj);
            });
            this.taskList = newArr;
          }
        });
    },
    // 已完成
    taskListType2() {
      api
        .apiTaskState({
          appState: 2,
        })
        .then((res) => {
          if (res.code == 0) {
            let newArr = [];
            res.data.forEach((item) => {
              let _obj = item.missionInfo;
              delete item["missionInfo"];
              _obj = { ..._obj, ...item };
              newArr.push(_obj);
            });
            this.taskList = newArr;
          }
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.active = localStorage.getItem("taskTabIndex")?Number(localStorage.getItem("taskTabIndex")):0;
    this.taskListFn();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    localStorage.setItem("taskTabIndex", this.active);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.context_box_f {
  padding-top: 44px;
  ::v-deep {
    .van-pagination__item {
      color: $niceblue;
      &:active {
        background-color: $niceblue;
        color: #fff;
      }
    }
    .van-pagination__item--active {
      background-color: $niceblue;
      color: #fff;
    }
  }
}
.taskM_page {
  margin-top: 10px;
}
.taskM {
  padding: 20px;
  .taskM_in {
    margin-bottom: 10px;
  }
}
.task_tabs {
  position: fixed;
  width: 100%;
  top: 44px;
  left: 0px;
  z-index: 88;
}
</style>
